<template>
  <div
      :class="['navbar', 'navbar-' + _theme, fixed && 'navbar-fixed']"
      :style="{height: height + 'px', paddingTop: paddingTop + 'px', opacity: navbarOpacity}">
    <div class="center" v-if="(showTitle && title)" :style="{top: paddingTop + 'px'}">
      <text :class="['title', 'title-' + _theme]">{{title}}</text>
    </div>
    <div class="left" v-if="leftShow" >
      <text @click="leftItemClick" :class="['activeable', 'icon', 'icon-item', 'icon-item-' + _theme, 'back']">{{leftItemIcon || '\ue600'}}</text>
      <text @click="leftItemClick" v-if="leftItemText" :class="['left-text', 'left-text-' + _theme]">{{leftItemText}}</text>
    </div>
    <div class="center-node" v-if="titleNode">
      <slot v-if="showTitle && titleNode" style="flex: 1" name="titleNode"></slot>
    </div>
    <div class="right" v-if="rightShow">
      <template v-if="rightNode">
        <slot name="rightNode"></slot>
      </template>
      <template v-if="!rightNode">
        <text v-if="rightItemText || rightItemIcon"
              v-on:click="rightItemClick"
              :class="['activeable', 'icon', 'right-text', 'right-text-' + _theme, rightItemIcon && 'icon-item', rightItemIcon && 'icon-item-' + _theme]"
          ><slot name="rightItemIcon"></slot>{{rightItemText}}</text>
      </template>
    </div>
  </div>
</template>

<script>
let navigator = require('../include/xnavigator')
let platform = require('../include/platform')
module.exports = {
  mixins: [
    require('../include/page-xdom')
  ],
  props: {
    title: {default: ''},
    theme: {default: 'transparent'},
    height: {default: 130},
    fixed: {default: false},
    rightItemText: {default: ''},
    scrollOffsetY: {default: 0},
    transformTheme: {default: 'light'},
    showTitle: {default: true},
    rightNode: {default: false},
    rightItemIcon: {default: ''},
    leftItemIcon: {default: ''},
    leftItemText: {default: ''},
    leftBack: {default: true},
    titleNode: {default: false},
    leftShow: {default: true},
    rightShow: {default: true}
  },

  data () {
    return {
      navbarOpacity: 1,
      _theme: '',
      paddingTop: 40
    }
  },
  components: {},
  created () {
    this._theme = this.theme
    this.$watch('scrollOffsetY', () => {
      this.handleScrollTop()
    })
    this.$watch('theme', (newVal, oldVal) => {
      this._theme = newVal
    })
    if (platform.isWeb()) {
      this.paddingTop = 0
      this.height = 90
    }
  },
  methods: {
    rightItemClick () {
      this.$emit('rightItemClick')
    },
    leftItemClick (e) {
      if (this.leftBack) {
        navigator.pop()
      } else {
        this.$emit('leftItemClick', e)
      }
    },
    handleScrollTop () {
      if (this.scrollOffsetY >= 0) {
        if (this._theme !== this.theme) {
          this.navbarOpacity = 1
          this._theme = this.theme
        }
      } else {
        let offsetY = -300
        let opacity = this.scrollOffsetY / offsetY
        if (opacity <= 1) {
          // modal.toast({message: 2, duration: 0.001})
          this.navbarOpacity = opacity
        } else if (this.navbarOpacity !== 1) {
          this.navbarOpacity = 1
        }
        if (this._theme !== this.transformTheme) {
          this.navbarOpacity = 0
          this._theme = this.transformTheme
        }
      }
    }
  }
}
</script>

<style lang="scss">
  @import "../sass/var";
  @import "../sass/icon";
  @import "../sass/mixin";
  @import "../sass/activeable";
  $iconBgColor: rgba(40, 40, 40, 0.62);
  $iconSize: 64px;
  .navbar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1000;
    &-gradient {
      background-image: $gradient-bg-primary;
    }
    &-primary {
      background-color: $brand-primary;
    }
    &-light {
      background-color: #F9F9F9;
      background-image: $gradient-bg-navbar;
      @include border(1, solid, #ddd)
    }
    &-fixed {
      position: fixed;
      top: 0;
      right: 0;
      left: 0
    }
  }

  .icon-item {
    font-size: 36px;
    width: $iconSize;
    height: $iconSize;
    line-height: $iconSize;
    text-align: center;
    border-radius: $iconSize;
    color: #ffffff;
    background-color: transparent;
    &-transparent {
      background-color: $iconBgColor
    }
    &-transparent-light {
      background-color: transparent;
    }
    &-transparent-full {
      color: $color;
    }
    &-transparent-full-light {
      color:#fff;
    }
    &-light {
      color: $color;
    }
  }

  .back {
  }
  .title {
    color: #ffffff;
    font-size: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    lines: 1;
    &-light {
      color: $color;
    }
    &-transparent-full {
      color: $color;
    }
    &-transparent-full-light {
      color:#fff;
    }
  }

  .left,.right {
    /*position: absolute;*/
    /*top: 40;*/
    /*height: 90;*/
    /*width: 375;*/
    /*flex-direction: row;*/
    /*align-items: center;*/
    /*!*background-color: #eee;*!*/
  }
  .left {
    /*left: 0;*/
    flex-direction: row;
    align-items: center;
    padding-left: 15px;
    &-text {
      font-size: 36px;
      text-align: center;
      color: #ffffff;
      &-transparent {
        background-color: $iconBgColor
      }
      &-transparent-full {
        color: $color;
      }
      &-transparent-full-light {
        color:#fff;
      }
      &-light {
        color: $color;
      }
    }
  }
  .right {
    /*right: 0;*/
    align-items: flex-end;
    justify-content: flex-end;
    padding-right: 15px;
    &-text {
      font-size: 32px;
      color: #fff;
      text-align: center;
      &-transparent {
        background-color: $iconBgColor
      }
      &-transparent-full {
        color: $color;
      }
      &-transparent-full-light {
        color:#fff;
      }
      &-light {
        color: $color;
      }
    }
  }
  .center {
    position: absolute;
    left: 0;
    right: 0;
    height: 90px;
    justify-content: center;
    align-items: center;
  }
  .center-node {
    flex: 1;
    padding: 0 15px;
    /*align-items: center;*/
    /*justify-content: center;*/
  }

</style>
